@media screen and (min-width: 320px)  and (max-width: 359px){
    html {
        font-size: 50px;
    }
}
@media screen and (min-width: 360px) and (max-width: 399px){
    html {
        font-size: 56px;
    }
}
@media screen and (min-width: 400px) and (max-width: 439px){
    html {
        font-size: 63px;
    }
}
@media screen and (min-width: 440px) and (max-width: 479px) {
    html {
        font-size: 69px;
    }
}
@media screen and (min-width: 480px) and (max-width: 639px) {
    html {
        font-size: 75px;
    }
}
html {
    font-size: 15.625vw;
}
@media screen and (min-width: 640px) {
    html {
        font-size: 100px;
    }
    .top{max-width: 640px !important; left: 50% !important; margin-left: -320px;}
}
/*样式初始化*/
html,body{width: 100%; height: 100%;position: relative; max-width: 640px;-webkit-tap-highlight-color:transparent; font-family: "Microsoft YaHei"; margin: 0 auto; line-height: 1.15;  -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;}
article,aside,footer,header,nav,section {display: block;}
dl,dd,p{margin: 0;}
ul,input{margin: 0; padding: 0;}
h1,h2,h3,h4,h5{ margin: 0; font-size: inherit;}
h1{font-size: 2em; margin: 0.67em 0;}
a {background-color: transparent;  -webkit-text-decoration-skip: objects; text-decoration: none;}
input,textarea {font-family: sans-serif; font-size: 100%; line-height: 1.15;margin: 0;}
button,
input { /* 1 */
    overflow: visible;
    border:none;
    color:#333;
}
input,textarea{outline: none;-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);resize: none;border-radius: 0;}
img{border-style: none;}
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 2 */
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
textarea {
    overflow: auto;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #999;
}
[hidden] {
    display: none;
}
article,aside,footer,header,nav,section,div,form,p,h2,h3,h4,h5,input,ul,li,dl,dt,dd,label,textarea{box-sizing: border-box;-webkit-tap-highlight-color:transparent;}
li{list-style: none;}
i,em{font-style: normal;}
/*公共样式*/
.fl{float: left;}
.fr{float: right;}
.colorY{color: #ffab3f;}
.colorG{color: #929292;}
.bgW{background-color: #fff !important;}
/*主要样式*/
.box{width: 100%; height: 100%; background-color: #f9f9f9; padding-top: 0.7rem; position: relative;}
.top{width:100%;height: 0.7rem; line-height: 0.7rem; background-color: #ff4b55; position: fixed; left: 0; top: 0; color: #fff; font-size: 0.26rem; text-align: center; z-index: 2;}
.back{width: 10%; height: 0.7rem; text-align: center; position: absolute; left: 0; top: 0; background: url("images/back.png") center no-repeat; background-size: 0.34rem;}
.main{overflow: hidden; clear: both; background-color: #f9f9f9;}
.listBox{width: 49%; height: 4.8rem; background-color: #fff; margin-bottom: 2%; position: relative;}
.listBox:nth-child(2n+1){margin-right: 2%;}
.show-img{width: 100%;height: 4rem; overflow: hidden;}
.show-img img{height: 4rem; min-width: 100%;}
.live-state{padding: 0.08rem 0.1rem 0.06rem 0.2rem; border-radius: 0.3rem; background-color: rgba(0,0,0,0.5); position: absolute; right: 0.16rem; top: 0.16rem; color: #fff; font-size: 0.16rem;}
.state{display: block; width: 4px; height: 4px; background-color: #ff4b55; border-radius: 2px; position: absolute; left: 0.1rem; top: 0.12rem;}
.people-number{color: #ffffff; font-size: 0.18rem; position: absolute; left: 0.1rem; bottom: 1rem;}
.live-name{position: absolute; width: 100%; height: 0.4rem; line-height: 0.4rem; left: 0.1rem; bottom: 0.2rem; color: #999; font-size: 0.18rem;}
.live-name p{width: 48%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.live-headImg img{width: 0.4rem; height: 0.4rem; border-radius: 0.2rem; margin-right: 0.14rem;}
.area{width: 32%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 0.3rem; background: url("images/area.png") no-repeat 0 0.04rem; background-size: 0.25rem;}
/*我的*/
.user-info{height: 1.4rem; padding: 0.2rem 0.3rem; font-size: 0.22rem; color: #999;}
.user-info dt{margin-right: 0.3rem; height: 1rem;}
.user-info dt img{height: 1rem; border-radius: 0.5rem;}
.user-info dd p{padding-top: 0.2rem;}
.vip{margin-top: 0.2rem; height: 0.8rem; font-size: 0.24rem; overflow: hidden;}
.myVip{width: 50%; padding-left: 0.7rem; height: 0.8rem; color: #ffab3f; line-height: 0.84rem; background: url("images/vip.png") no-repeat 0.2rem 0.18rem; background-size: 0.4rem;}
.open{width: 1rem; height: 0.5rem; font-size: 14px; background-color: #ff4b55; color: #fff; margin: 0.15rem 0.2rem 0 0; border-radius: 5px;}
.my-list{overflow: hidden; margin-top: 0.2rem; font-size: 0.23rem; color: #999;}
.my-list section{width: 100%; height: 0.8rem; line-height: 0.84rem; border-bottom:1px solid #e1e1e1; clear: both; overflow: hidden;}
.my-list section:last-child{border: none;}
.list1{width: 50%; height: 0.8rem; background: no-repeat 0.2rem center; background-size: 0.4rem; padding-left: 0.7rem;}
.gold{background-image: url("images/gold.png");}
.my-right{width: 10%; height: 0.8rem; background: url("images/right.png") no-repeat center; background-size: 0.32rem;}
.record{background-image: url("images/record.png"); background-position: 0.24rem center;}
.problem{background-image: url("images/problem.png"); background-size: 0.35rem; background-position: 0.23rem center;}
.service{background-image: url("images/service.png");}
.setUp{background-image: url("images/setUp.png");}
.title{width: 100%; height: 0.6rem; line-height: 0.62rem; font-size: 0.23rem; background-color: #f1f1f1; border-radius: 5px; padding-left: 0.2rem; margin: 0 auto;}
.txt{padding: 0.3rem 0.2rem; width: 100%; color: #999; font-size: 0.2rem; line-height: 0.3rem;word-wrap:break-word;}
.txt h3{color: #0099ff; padding: 0.2rem 0;}
.myTxt{width: 100%; margin: 0.3rem 0; font-size: 0.2rem; background-color: #f1f1f1; height: 2rem; border: none; border-radius: 5px; padding: 0.16rem;}
.phone{width: 100%; margin: 0.3rem 0; background-color: #f1f1f1; height: 0.6rem; padding-left: 0.16rem; border: none; border-radius: 5px;}
.submit{width: 90%; height: 0.7rem; margin-bottom: 0.2rem; font-size: 16px; color: #fff; background-color: #e60e1a; margin-left: 5%; border-radius: 5px;}
.my-form{width: 100%; overflow: hidden; margin-bottom: 0.3rem; padding-left: 0.2rem; background-color: #f1f1f1; height: 0.7rem; line-height: 0.7rem; border-radius: 5px; font-size: 0.23rem;}
.my-form label{display: block; width: 22%;}
.my-form input{width: 78%; height: 0.68rem; background-color: #f1f1f1;}
.btn1{width: 20%;height: 0.7rem; line-height: 0.7rem; position: absolute; right: 0; top: 0; font-size: 0.2rem;}
.banner{width: 100%; overflow: hidden;}
.banner img{width: 100%;}
.recharge{margin-top: 0.3rem; background-color: #fff; font-size: 0.21rem;}
.recharge-list:first-child{border-top: 1px solid #f1f1f1;}
.recharge-list{height: 1rem; padding:0.2rem;border-bottom: 1px solid #f1f1f1; overflow: hidden;clear: both;}
.recharge-list nav{font-size: 0.26rem; color: #ff4b55; line-height: 0.6rem;}
.recharge-list aside{width: 70%;}
.recharge-list aside nav{padding-right: 0.3rem;}
.recharge-list aside nav img{width: 0.7rem;}
.recharge-list aside section{font-size: 0.2rem; padding-top: 0.06rem;}
.recharge-list aside p{position: relative; width: 100%;}
.recharge-list aside span{position: absolute; left: 1.4rem; top: 0;}
.rechargeA{background-color:#fbe6e9;}
.show-gift{padding-left: 0.36rem; color: #ffab3f; padding-top: 0.1rem; background: url("images/gift.png") no-repeat 0 0.02rem; background-size: 0.36rem;}
/*直播页*/
.live{width:100%; height: 100%;}
.nav{width: 100%; height: 1rem; font-size: 0.18rem; padding: 0.2rem; color: #fff; background-color: rgba(0,0,0,0.6); position: absolute; left: 0; top:0; z-index: 2;}
.nav-left{overflow: hidden; height: 1rem; padding-right: 0.2rem;}
.live-headImg1{padding-right: 0.2rem;}
.live-headImg1 img{width: 0.6rem; height: 0.6rem; border-radius: 0.3rem;}
.follow{width: 0.8rem; height: 0.4rem; padding-top: 0.03rem; border-radius: 0.2rem; margin-top: 0.1rem; font-size: 0.22rem; color: #333; background-color: #fed94a;}
.open-live{padding: 0.03rem 0.2rem 0; height: 0.4rem; border-radius: 0.2rem; margin-top: 0.1rem; font-size: 0.22rem; color: #333; background-color: #fed94a;}
.live-box{overflow: hidden; position: relative; width: 100%; height: 55%;}
.live-img{width: 100%; height: 100%;}
.play{width: 1.2rem; height: 1.2rem; border-radius: 0.6rem; background-color: rgba(0,0,0,0.3); text-align: center; overflow: hidden; position: absolute; z-index: 2; left: 50%; top: 50%; margin-left: -0.6rem; margin-top: -0.6rem;}
.play img{display: block; margin: 0.1rem auto; width: 1rem;}
.commentBox{width: 100%; height: 45%; background: url("images/live.jpg") no-repeat 50% 100%; background-size: 200%; position: relative;}
.comment{width: 100%; height: 100%; font-size: 0.2rem; padding: 0.3rem 0.1rem; background-color: rgba(0,0,0,0.8);}
.comment-list{margin: 0.14rem 0; overflow: hidden; clear: both;}
.grade{display: block; padding: 3px 4px 2px; font-size: 0.16rem; margin-right: 0.1rem; color: #fff; border-radius: 4px; background-color: #58cbd0;}
.content{color: #ffed89; line-height: 16px; word-wrap:break-word;}
.content span{margin-left: 0.14rem;}
.bottom{width: 100%; overflow: hidden; clear: both; position: absolute; left: 0; bottom: 0.3rem; padding: 0 0.16rem;}
.myInt{width: 55%; padding-left: 0.2rem; margin-top: 0.1rem; line-height: 0.6rem; height: 0.6rem; border-radius: 0.3rem; background-color: rgba(255,255,255,0.5); color: #fff; font-size: 0.2rem;}
.recharge1{height: 0.6rem; line-height: 0.6rem; margin-top: 0.1rem; margin-left: 0.3rem; padding-left: 0.42rem; color: #fff; font-size: 14px; background: url("images/recharge.png") no-repeat 0 center; background-size: 0.34rem;}
.my-gift{width: 0.8rem; height: 0.8rem; background-color: #ffda44; border-radius: 0.4rem;}
.my-gift img{display:block;width: 0.6rem; margin: 0.1rem auto;}
/*直播1*/
.myLive{width: 100%; height: 100%; overflow: hidden;}
.liveImg{height: 100%; min-width: 100%;}
.commentBox1{max-height:4rem; width: 100%; overflow: hidden; position: absolute; bottom: 0; left: 0; z-index: 999;}
.comment1{padding: 0 4% 0.2rem; font-size: 0.2rem;}
.player{width: 100%; height: 100%; display: none;object-fit:fill;}
.show{display: block;}

.bubble{position: fixed;bottom:20px;right:0;}
canvas {
    position: relative;
    display: block;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.live-hit{width: 1.6rem; height: 0.7rem; color: rgba(255,255,255,0.7); font-size: 0.18rem; border-radius: 0.5rem; background-color: #565656; position: absolute; left: 0.2rem; top: 0.1rem; z-index: 999;}
.live-headImg2{width: 0.5rem; height: 0.5rem; border-radius: 0.25rem; overflow: hidden; margin: 0.1rem 0.12rem;}
.live-headImg2 img{width: 100%;}
.live-hit aside{padding-top: 0.1rem; line-height: 0.3rem; text-align: center;}